<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容生成</title>

    <style type="text/css">
        h3,
        p {
            text-align: center;
        }
        
        span {
            padding: 2px;
            border: 1px solid rgb(180, 180, 180);
        }
        
        .wrapper {
            width: 80%;
            border: 1px solid blue;
            margin: auto;
        }
        
        .first::before {
            display: block;
            background: rgb(251, 129, 59);
            height: 50px;
            margin: 5px;
            /* 为伪元素生成内容 */
            content: '这是伪元素中的内容';
        }
        
        .first::after {
            display: block;
            background: rgb(59, 126, 251);
            height: 50px;
            margin: 5px;
            /* 为伪元素生成内容 */
            content: '这是伪元素中的内容';
        }
        
        .second>ul {
            counter-reset: beiqu;
        }
        
        .second ul li::before {
            counter-increment: beiqu;
            content: counter(beiqu) "-";
        }
        
        .third>ul {
            counter-reset: xiqu;
        }
        
        .third ul li::before {
            counter-increment: xiqu;
            content: counter(xiqu) "-";
        }
    </style>
</head>

<body>

    <h3>用 <span>::before</span> 和 <span>::after</span> 生成伪元素</h3>
    <div class="wrapper first">
        <p>这里的段落是在div中本来就存在的</p>
    </div>

    <h3>测试用于生成内容的相关属性</h3>
    <p> counter-reset / counter-increment / content</p>
    <div class="wrapper second">
        <ul>
            <li>大肉包</li>
            <li>酸菜包</li>
            <li>豆沙包</li>
            <li>花卷</li>
            <li>烧麦</li>
            <li>饺子</li>
            <li>红薯</li>
        </ul>
    </div>

    <h3>理解 counter-reset 的作用</h3>
    <p>
        对于 <span>.third>ul { counter-reset: xiqu; }</span> 来说， 就是在 <span>.third</span> 内部每次遇到 <span>ul</span> 就会重置计数器。
    </p>
    <div class="wrapper third">
        <ul>
            <li>大肉包</li>
            <li>酸菜包</li>
            <li>豆沙包</li>
        </ul>
        <ul>
            <li>花卷</li>
            <li>烧麦</li>
            <li>饺子</li>
            <li>红薯</li>
        </ul>
        <ul>
            <li>手抓饼</li>
            <li>热豆浆</li>
            <li>烤肠</li>
            <li>羊肉串</li>
        </ul>
    </div>

    <div>
        <a href="/">返回首页</a>
    </div>

</body>

</html>